<template>
  <div class="p-6 space-y-6">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
      <h1 class="text-4xl font-bold text-white mb-2 animate-glow flex items-center justify-center">
        <Globe class="w-10 h-10 mr-4 text-blue-500" />
        {{ ts('跨境分析中心', '跨境分析中心') }}
      </h1>
      <p class="text-blue-500">{{ ts('全球贸易地图与AI智慧跨境政策分析', '全球贸易地图与AI智慧跨境政策分析') }}</p>
    </div>

    <!-- Agent智能分析面板 -->
    <div class="glass-card p-6 mb-6 border-l-4 border-blue-500">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center space-x-3">
          <div class="relative">
            <Bot class="w-6 h-6 text-blue-500" />
            <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
          </div>
          <div>
            <h3 class="text-xl font-semibold text-white">{{ ts('AI跨境智慧助手', 'AI跨境智慧助手') }}</h3>
            <p class="text-blue-500 text-sm">{{ ts('实时监控全球贸易政策，提供智慧分析方案', '实时监控全球贸易政策，提供智慧分析方案') }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <div class="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded animate-pulse">
            {{ ts('AI分析中', 'AI分析中') }}
          </div>
          <button 
            @click="triggerAIAnalysis"
            class="px-4 py-2 bg-blue-500/20 text-blue-500 rounded-lg hover:bg-blue-500/30 transition-colors"
          >
            {{ ts('获取智慧方案', '获取智慧方案') }}
          </button>
        </div>
      </div>
      
      <!-- AI洞察展示 -->
      <div v-if="aiInsights.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div 
          v-for="insight in aiInsights" 
          :key="insight.id"
          class="bg-white/5 rounded-lg p-4 border border-blue-500/30"
        >
          <div class="flex items-center justify-between mb-2">
            <h4 class="text-white font-medium flex items-center">
              <component :is="insight.icon" class="w-4 h-4 mr-2 text-blue-500" />
              {{ ts(insight.title, insight.title) }}
            </h4>
            <span :class="[
              'text-xs px-2 py-1 rounded',
              insight.priority === 'high' ? 'bg-red-500/20 text-red-400' :
              insight.priority === 'medium' ? 'bg-yellow-500/20 text-yellow-400' :
              'bg-green-500/20 text-green-400'
            ]">
              {{ ts(insight.priorityText, insight.priorityText) }}
            </span>
          </div>
          <p class="text-white/70 text-sm mb-3">{{ ts(insight.content, insight.content) }}</p>
          <div class="flex items-center justify-between">
            <span class="text-blue-500 text-xs font-medium">{{ ts(insight.impact, insight.impact) }}</span>
            <button class="text-blue-500 hover:text-blue-400 text-xs">{{ ts('详细分析', '详细分析') }}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能标签页 -->
    <div class="flex space-x-1 glass-card p-1 rounded-xl mb-6">
      <button
        @click="activeTab = 'map'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'map'
            ? 'bg-blue-500 text-white'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        全球地图分析
      </button>
      <button
        @click="activeTab = 'match'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'match'
            ? 'bg-blue-500 text-white'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        政策匹配分析
      </button>
      <button
        @click="activeTab = 'routes'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'routes'
            ? 'bg-blue-500 text-white'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        贸易路线分析
      </button>
    </div>

    <!-- 主要内容区域 -->
    <div v-if="activeTab === 'map'" class="grid grid-cols-1 xl:grid-cols-3 gap-6">
      <!-- 左侧地图区域 -->
      <div class="xl:col-span-2">
        <div class="glass-card p-6">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold text-white flex items-center">
              <MapPin class="w-6 h-6 mr-3 text-blue-500" />
              {{ ts('全球贸易地图', '全球贸易地图') }}
            </h2>
            <div class="flex items-center space-x-3">
              <!-- 地图类型选择器 -->
              <select v-model="mapType" class="p-2 bg-gray-800 text-white rounded border border-gray-600 text-sm">
                <option value="world">{{ ts('世界地图', '世界地图') }}</option>
                <option value="china">{{ ts('中国地图', '中国地图') }}</option>
              </select>
              <!-- 地图视图选择器 -->
              <select v-model="mapView" class="p-2 bg-gray-800 text-white rounded border border-gray-600 text-sm">
                <option value="trade">{{ ts('贸易流量', '贸易流量') }}</option>
                <option value="policy">{{ ts('政策热力', '政策热力') }}</option>
                <option value="company">{{ ts('企业分布', '企业分布') }}</option>
                <option value="route">{{ ts('贸易路线', '贸易路线') }}</option>
              </select>
              <button 
                @click="refreshMap"
                class="p-2 bg-blue-500/20 text-blue-500 rounded hover:bg-blue-500/30 transition-colors"
              >
                <RefreshCw class="w-4 h-4" />
              </button>
            </div>
          </div>
          
          <!-- 地图组件 -->
          <div class="relative min-h-[400px] w-full bg-gray-900/30 rounded-lg overflow-hidden">
            <!-- 世界地图 -->
            <div v-if="mapType === 'world'" class="w-full h-96">
              <WorldMapSVG 
                :view-mode="mapView" 
                :show-routes="showTradeRoutes"
                :highlight-regions="selectedRegions"
                @region-click="onRegionClick"
                @route-click="onRouteClick"
                class="w-full h-full"
              />
            </div>
            
            <!-- 中国地图 -->
            <div v-else-if="mapType === 'china'" class="w-full h-96">
              <TradeCompanyMap 
                :view-mode="mapView" 
                :show-routes="showTradeRoutes"
                :highlight-regions="selectedRegions"
                @region-click="onRegionClick"
                @route-click="onRouteClick"
                class="w-full h-full"
              />
            </div>
            
            <!-- 地图控制器 -->
            <div class="absolute bottom-4 right-4 flex flex-wrap gap-2 z-10 max-w-xs">
              <button 
                v-for="control in mapControls" 
                :key="control.id"
                @click="toggleMapLayer(control.id)"
                :class="[
                  'px-3 py-2 rounded-lg transition-all text-xs border border-white/20 whitespace-nowrap',
                  control.active ? 'bg-blue-500 text-white shadow-lg' : 'bg-white/10 text-white/70 hover:bg-white/20'
                ]"
              >
                {{ ts(control.label, control.label) }}
              </button>
            </div>
          </div>
          
          <!-- 地图数据统计 -->
          <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="text-center">
              <div class="text-2xl font-bold text-blue-500 mb-1">{{ globalStats.countries }}</div>
              <div class="text-white/70 text-sm">{{ ts('覆盖国家', '覆盖国家') }}</div>
            </div>
            <div class="text-center">
              <div class="text-2xl font-bold text-green-400 mb-1">{{ globalStats.tradeRoutes }}</div>
              <div class="text-white/70 text-sm">{{ ts('贸易路线', '贸易路线') }}</div>
            </div>
            <div class="text-center">
              <div class="text-2xl font-bold text-yellow-400 mb-1">{{ globalStats.companies }}</div>
              <div class="text-white/70 text-sm">{{ ts('企业数量', '企业数量') }}</div>
            </div>
            <div class="text-center">
              <div class="text-2xl font-bold text-purple-400 mb-1">{{ globalStats.policies }}</div>
              <div class="text-white/70 text-sm">{{ ts('政策总数', '政策总数') }}</div>
            </div>
          </div>

          <!-- 国家对比分析区域 -->
          <div v-if="selectedCountries.length > 0" class="mt-6 border-t border-white/10 pt-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-xl font-bold text-white flex items-center">
                <BarChart3 class="w-5 h-5 mr-2 text-tech-blue-500" />
                {{ ts('国家对比分析', '国家对比分析') }}
              </h3>
              <button 
                @click="selectedCountries = []; countryComparisonResult = null"
                class="px-3 py-1 bg-red-500/20 text-red-400 rounded-lg hover:bg-red-500/30 transition-colors text-sm"
              >
                {{ ts('清除', '清除') }}
              </button>
            </div>
            
            <!-- 选择状态指示 -->
            <div class="mb-4">
              <div class="text-white/70 mb-2 text-sm">
                {{ ts('已选择：', '已选择：') }}
                <span class="text-tech-blue-500">{{ selectedCountries.length }}/2</span>
              </div>
              <div class="flex flex-wrap gap-2">
                <div 
                  v-for="(country, index) in selectedCountries" 
                  :key="country.code"
                  class="flex items-center space-x-2 bg-tech-blue-500/20 border border-tech-blue-500/30 rounded px-3 py-1 text-sm"
                >
                  <div class="w-2 h-2 bg-tech-blue-500 rounded-full"></div>
                  <span class="text-white">{{ country.name }}</span>
                  <button 
                    @click="selectedCountries.splice(index, 1); countryComparisonResult = null"
                    class="text-red-400 hover:text-red-300 ml-1"
                  >
                    ×
                  </button>
                </div>
                <div 
                  v-if="selectedCountries.length < 2" 
                  class="flex items-center space-x-2 bg-white/10 border border-dashed border-white/30 rounded px-3 py-1 text-sm"
                >
                  <div class="w-2 h-2 border border-white/50 rounded-full"></div>
                  <span class="text-white/70">{{ ts('点击地图选择', '点击地图选择') }}</span>
                </div>
              </div>
            </div>
            
            <!-- 对比结果展示 -->
            <div v-if="countryComparisonResult" class="space-y-4">
              <!-- 经济指标对比 - 紧凑版 -->
              <div class="bg-white/5 rounded-lg p-4">
                <h4 class="text-white font-medium mb-3 flex items-center text-sm">
                  <DollarSign class="w-4 h-4 mr-1 text-green-400" />
                  {{ ts('经济指标对比', '经济指标对比') }}
                </h4>
                <div class="grid grid-cols-3 gap-3 text-xs">
                  <div class="text-center">
                    <div class="text-white/70 mb-2">{{ ts('GDP总量', 'GDP总量') }}</div>
                    <div class="space-y-1">
                      <div class="p-2 bg-tech-blue-500/20 rounded text-tech-blue-500 font-bold">{{ countryComparisonResult.country1.economy.gdp }}</div>
                      <div class="p-2 bg-purple-500/20 rounded text-purple-500 font-bold">{{ countryComparisonResult.country2.economy.gdp }}</div>
                    </div>
                  </div>
                  <div class="text-center">
                    <div class="text-white/70 mb-2">{{ ts('贸易额', '贸易额') }}</div>
                    <div class="space-y-1">
                      <div class="p-2 bg-tech-blue-500/20 rounded text-tech-blue-500 font-bold">{{ countryComparisonResult.country1.economy.tradeVolume }}</div>
                      <div class="p-2 bg-purple-500/20 rounded text-purple-500 font-bold">{{ countryComparisonResult.country2.economy.tradeVolume }}</div>
                    </div>
                  </div>
                  <div class="text-center">
                    <div class="text-white/70 mb-2">{{ ts('增长率', '增长率') }}</div>
                    <div class="space-y-1">
                      <div class="p-2 bg-tech-blue-500/20 rounded text-tech-blue-500 font-bold">{{ countryComparisonResult.country1.economy.growth }}</div>
                      <div class="p-2 bg-purple-500/20 rounded text-purple-500 font-bold">{{ countryComparisonResult.country2.economy.growth }}</div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 政策环境对比 - 紧凑版 -->
              <div class="bg-white/5 rounded-lg p-4">
                <h4 class="text-white font-medium mb-3 flex items-center text-sm">
                  <FileText class="w-4 h-4 mr-1 text-yellow-400" />
                  {{ ts('政策环境', '政策环境') }}
                </h4>
                <div class="grid grid-cols-3 gap-3 text-xs">
                  <div class="text-center">
                    <div class="text-white/70 mb-2">{{ ts('关税率', '关税率') }}</div>
                    <div class="space-y-1">
                      <div class="p-2 bg-tech-blue-500/20 rounded text-tech-blue-500 font-bold">{{ countryComparisonResult.country1.policies.tariffRate }}</div>
                      <div class="p-2 bg-purple-500/20 rounded text-purple-500 font-bold">{{ countryComparisonResult.country2.policies.tariffRate }}</div>
                    </div>
                  </div>
                  <div class="text-center">
                    <div class="text-white/70 mb-2">{{ ts('自贸协定', '自贸协定') }}</div>
                    <div class="space-y-1">
                      <div class="p-2 bg-tech-blue-500/20 rounded text-tech-blue-500 font-bold">{{ countryComparisonResult.country1.policies.freeTradeAgreements }}</div>
                      <div class="p-2 bg-purple-500/20 rounded text-purple-500 font-bold">{{ countryComparisonResult.country2.policies.freeTradeAgreements }}</div>
                    </div>
                  </div>
                  <div class="text-center">
                    <div class="text-white/70 mb-2">{{ ts('营商排名', '营商排名') }}</div>
                    <div class="space-y-1">
                      <div class="p-2 bg-tech-blue-500/20 rounded text-tech-blue-500 font-bold">{{ countryComparisonResult.country1.policies.businessEase }}</div>
                      <div class="p-2 bg-purple-500/20 rounded text-purple-500 font-bold">{{ countryComparisonResult.country2.policies.businessEase }}</div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- AI建议 - 紧凑版 -->
              <div class="bg-white/5 rounded-lg p-4">
                <h4 class="text-white font-medium mb-3 flex items-center text-sm">
                  <Bot class="w-4 h-4 mr-1 text-electric-500" />
                  {{ ts('AI分析建议', 'AI分析建议') }}
                </h4>
                <div class="space-y-2">
                  <div 
                    v-for="(difference, index) in countryComparisonResult.comparison.keyDifferences.slice(0, 2)" 
                    :key="index"
                    class="p-2 bg-white/5 rounded border-l-2 border-yellow-500"
                  >
                    <p class="text-white/90 text-xs">{{ difference }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧分析面板 -->
      <div class="space-y-6">
        <!-- 区域详情 -->
        <div class="glass-card p-6">
          <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
            <Target class="w-5 h-5 mr-2 text-blue-500" />
            {{ selectedRegionInfo ? ts('区域详情', '区域详情') : ts('选择区域', '选择区域') }}
          </h3>
          
          <div v-if="selectedRegionInfo" class="space-y-4">
            <div>
              <h4 class="text-white font-medium text-lg mb-2">{{ selectedRegionInfo.name }}</h4>
              <div class="space-y-2">
                <div class="flex justify-between">
                  <span class="text-gray-400 text-sm">{{ ts('企业数量', '企业数量') }}</span>
                  <span class="text-blue-500 font-semibold">{{ selectedRegionInfo.companies }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-400 text-sm">{{ ts('贸易额', '贸易额') }}</span>
                  <span class="text-green-400 font-semibold">{{ selectedRegionInfo.tradeVolume }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-400 text-sm">{{ ts('政策数量', '政策数量') }}</span>
                  <span class="text-purple-500 font-semibold">{{ selectedRegionInfo.policies }}</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-400 text-sm">{{ ts('风险等级', '风险等级') }}</span>
                  <span :class="[
                    'font-semibold',
                    selectedRegionInfo.riskLevel === 'low' ? 'text-green-400' :
                    selectedRegionInfo.riskLevel === 'medium' ? 'text-yellow-400' :
                    'text-red-400'
                  ]">
                    {{ ts(selectedRegionInfo.riskLevelText, selectedRegionInfo.riskLevelText) }}
                  </span>
                </div>
              </div>
            </div>
            
            <!-- 重点政策 -->
            <div>
              <h5 class="text-white font-medium mb-2">{{ ts('重点政策', '重点政策') }}</h5>
              <div class="space-y-2">
                <div 
                  v-for="policy in selectedRegionInfo.keyPolicies" 
                  :key="policy.id"
                  class="p-3 bg-white/5 rounded-lg border border-blue-500/30"
                >
                  <h6 class="text-white text-sm font-medium mb-1">{{ ts(policy.title, policy.title) }}</h6>
                  <p class="text-gray-400 text-xs">{{ ts(policy.summary, policy.summary) }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="text-center py-8">
            <MapPin class="w-12 h-12 text-gray-500 mx-auto mb-3" />
            <p class="text-gray-400">{{ ts('点击地图上的区域查看详细信息', '点击地图上的区域查看详细信息') }}</p>
          </div>
        </div>

        <!-- 智能推荐 -->
        <div class="glass-card p-6">
          <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
            <Lightbulb class="w-5 h-5 mr-2 text-blue-500" />
            {{ ts('智慧推荐', '智慧推荐') }}
          </h3>
          
          <div class="space-y-3">
            <div 
              v-for="recommendation in smartRecommendations" 
              :key="recommendation.id"
              class="p-4 bg-white/5 rounded-lg border border-blue-500/30"
            >
              <div class="flex items-start justify-between mb-2">
                <h4 class="text-white font-medium text-sm">{{ ts(recommendation.title, recommendation.title) }}</h4>
                <span class="text-xs px-2 py-1 bg-blue-500/20 text-blue-400 rounded">
                  {{ recommendation.confidence }}%
                </span>
              </div>
              <p class="text-gray-400 text-xs mb-2">{{ ts(recommendation.description, recommendation.description) }}</p>
              <div class="flex items-center justify-between">
                <span class="text-blue-500 text-xs font-medium">{{ ts(recommendation.action, recommendation.action) }}</span>
                <button class="text-blue-500 hover:text-blue-400 text-xs">{{ ts('了解更多', '了解更多') }}</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 实时动态 -->
        <div class="glass-card p-6">
          <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
            <Activity class="w-5 h-5 mr-2 text-blue-500" />
            {{ ts('实时动态', '实时动态') }}
          </h3>
          
          <div class="space-y-3 max-h-64 overflow-y-auto">
            <div 
              v-for="update in realTimeUpdates" 
              :key="update.id"
              class="flex items-start space-x-3 p-3 bg-white/5 rounded-lg"
            >
              <div :class="[
                'w-2 h-2 rounded-full mt-2 flex-shrink-0',
                update.type === 'policy' ? 'bg-purple-400' :
                update.type === 'trade' ? 'bg-green-400' :
                'bg-yellow-400'
              ]"></div>
              <div class="flex-1">
                <p class="text-white text-sm">{{ ts(update.content, update.content) }}</p>
                <span class="text-gray-400 text-xs">{{ update.time }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- 跨境分析工具栏 -->
    <div class="glass-card p-6">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-white flex items-center">
          <BarChart3 class="w-6 h-6 mr-3 text-blue-500" />
          {{ ts('跨境分析工具', '跨境分析工具') }}
        </h2>
        <div class="flex items-center space-x-3">
          <button 
            v-for="tool in analysisTools" 
            :key="tool.id"
            @click="activeTool = tool.id"
            :class="[
              'px-4 py-2 rounded-lg transition-all text-sm',
              activeTool === tool.id ? 'bg-blue-500 text-white' : 'bg-white/10 text-white/70 hover:bg-white/20'
            ]"
          >
            {{ ts(tool.name, tool.name) }}
          </button>
        </div>
      </div>
      
      <!-- 路线分析工具 -->
      <div v-if="activeTool === 'route'" class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div class="lg:col-span-3">
          <h3 class="text-white font-medium mb-3">{{ ts('贸易路线分析', '贸易路线分析') }}</h3>
          <div class="grid grid-cols-2 gap-4 mb-4">
            <select v-model="routeAnalysis.origin" class="p-3 bg-gray-800 text-white rounded border border-gray-600">
              <option value="">{{ ts('选择起点', '选择起点') }}</option>
              <option v-for="country in countries" :key="country.code" :value="country.code">
                {{ ts(country.name, country.name) }}
              </option>
            </select>
            <select v-model="routeAnalysis.destination" class="p-3 bg-gray-800 text-white rounded border border-gray-600">
              <option value="">{{ ts('选择终点', '选择终点') }}</option>
              <option v-for="country in countries" :key="country.code" :value="country.code">
                {{ ts(country.name, country.name) }}
              </option>
            </select>
          </div>
          <button 
            @click="analyzeRoute"
            :disabled="!routeAnalysis.origin || !routeAnalysis.destination"
            class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50"
          >
            {{ ts('分析路线', '分析路线') }}
          </button>
        </div>
        
        <div v-if="routeAnalysisResult" class="bg-white/5 rounded-lg p-4">
          <h4 class="text-white font-medium mb-3">{{ ts('分析结果', '分析结果') }}</h4>
          <div class="space-y-2">
            <div class="flex justify-between">
              <span class="text-gray-400 text-sm">{{ ts('运输时间', '运输时间') }}</span>
              <span class="text-blue-500 font-medium">{{ routeAnalysisResult.duration }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-400 text-sm">{{ ts('运输成本', '运输成本') }}</span>
              <span class="text-green-400 font-medium">{{ routeAnalysisResult.cost }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-400 text-sm">{{ ts('政策风险', '政策风险') }}</span>
              <span :class="[
                'font-medium',
                routeAnalysisResult.risk === 'low' ? 'text-green-400' :
                routeAnalysisResult.risk === 'medium' ? 'text-yellow-400' :
                'text-red-400'
              ]">
                {{ ts(routeAnalysisResult.riskText, routeAnalysisResult.riskText) }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 政策对比工具 -->
      <div v-if="activeTool === 'compare'" class="space-y-4">
        <h3 class="text-white font-medium">{{ ts('跨境政策对比', '跨境政策对比') }}</h3>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div class="lg:col-span-2">
            <div class="grid grid-cols-3 gap-4">
              <select v-model="policyCompare.region1" class="p-3 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">{{ ts('选择地区1', '选择地区1') }}</option>
                <option v-for="region in regions" :key="region.code" :value="region.code">
                  {{ ts(region.name, region.name) }}
                </option>
              </select>
              <select v-model="policyCompare.region2" class="p-3 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">{{ ts('选择地区2', '选择地区2') }}</option>
                <option v-for="region in regions" :key="region.code" :value="region.code">
                  {{ ts(region.name, region.name) }}
                </option>
              </select>
              <button 
                @click="comparePolicies"
                :disabled="!policyCompare.region1 || !policyCompare.region2"
                class="px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50"
              >
                {{ ts('对比', '对比') }}
              </button>
            </div>
          </div>
          
          <div v-if="policyCompareResult" class="bg-white/5 rounded-lg p-4">
            <h4 class="text-white font-medium mb-3">{{ ts('对比差异', '对比差异') }}</h4>
            <div class="space-y-2">
              <div class="text-sm">
                <span class="text-gray-400">{{ ts('税率差异:', '税率差异:') }}</span>
                <span class="text-yellow-400 ml-2">{{ policyCompareResult.taxDiff }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-400">{{ ts('准入门槛:', '准入门槛:') }}</span>
                <span class="text-green-400 ml-2">{{ policyCompareResult.threshold }}</span>
              </div>
              <div class="text-sm">
                <span class="text-gray-400">{{ ts('优惠力度:', '优惠力度:') }}</span>
                <span class="text-blue-400 ml-2">{{ policyCompareResult.incentive }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 市场分析工具 -->
      <div v-if="activeTool === 'market'" class="space-y-4">
        <h3 class="text-white font-medium">{{ ts('市场机会分析', '市场机会分析') }}</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <select v-model="marketAnalysis.industry" class="w-full p-3 bg-gray-800 text-white rounded border border-gray-600 mb-4">
              <option value="">{{ ts('选择行业', '选择行业') }}</option>
              <option value="electronics">{{ ts('电子产品', '电子产品') }}</option>
              <option value="textiles">{{ ts('纺织服装', '纺织服装') }}</option>
              <option value="machinery">{{ ts('机械设备', '机械设备') }}</option>
              <option value="chemicals">{{ ts('化工产品', '化工产品') }}</option>
            </select>
            <button 
              @click="analyzeMarket"
              :disabled="!marketAnalysis.industry"
              class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50"
            >
              {{ ts('分析市场', '分析市场') }}
            </button>
          </div>
          
          <div v-if="marketAnalysisResult" class="bg-white/5 rounded-lg p-4">
            <h4 class="text-white font-medium mb-3">{{ ts('市场机会', '市场机会') }}</h4>
            <div class="space-y-3">
              <div 
                v-for="opportunity in marketAnalysisResult" 
                :key="opportunity.id"
                class="p-3 bg-white/5 rounded border border-blue-500/30"
              >
                <h5 class="text-white text-sm font-medium">{{ ts(opportunity.market, opportunity.market) }}</h5>
                <p class="text-gray-400 text-xs">{{ ts(opportunity.opportunity, opportunity.opportunity) }}</p>
                <span class="text-blue-500 text-xs">{{ ts('潜力评分:', '潜力评分:') }} {{ opportunity.score }}/10</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 政策匹配分析标签页 -->
    <div v-if="activeTab === 'match'" class="space-y-6">
      <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- 企业信息输入 -->
        <div class="glass-card p-6">
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <Building class="w-5 h-5 mr-2 text-blue-500" />
            企业信息
          </h3>
          
          <div class="space-y-4">
            <div>
              <label class="block text-white text-sm font-medium mb-2">企业名称</label>
              <input
                v-model="enterpriseInfo.name"
                type="text"
                placeholder="输入企业名称..."
                class="w-full p-2 bg-gray-800 text-white rounded border border-gray-600"
              />
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">企业规模</label>
              <select v-model="enterpriseInfo.size" class="w-full p-2 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">请选择</option>
                <option value="大型企业">大型企业</option>
                <option value="中型企业">中型企业</option>
                <option value="小型企业">小型企业</option>
                <option value="微型企业">微型企业</option>
              </select>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">行业类型</label>
              <select v-model="enterpriseInfo.industry" class="w-full p-2 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">请选择</option>
                <option value="制造业">制造业</option>
                <option value="信息技术">信息技术</option>
                <option value="跨境电商">跨境电商</option>
                <option value="新能源">新能源</option>
                <option value="生物医药">生物医药</option>
              </select>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">目标市场</label>
              <select v-model="enterpriseInfo.targetMarket" class="w-full p-2 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">请选择</option>
                <option value="欧盟">欧盟</option>
                <option value="东盟">东盟</option>
                <option value="北美">北美</option>
                <option value="中东">中东</option>
                <option value="非洲">非洲</option>
              </select>
            </div>

            <button
              @click="performMatch"
              :disabled="!enterpriseInfo.name || !enterpriseInfo.industry"
              class="w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50"
            >
              开始智能匹配
            </button>
          </div>
        </div>

        <!-- 匹配结果 -->
        <div class="xl:col-span-2 glass-card p-6">
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <Target class="w-5 h-5 mr-2 text-green-400" />
            匹配结果
          </h3>
          
          <div v-if="matchResults.length > 0" class="space-y-4">
            <div
              v-for="result in matchResults"
              :key="result.id"
              class="border border-white/20 rounded-lg p-4 hover:border-blue-500/50 transition-colors"
            >
              <div class="flex items-start justify-between mb-3">
                <div class="flex-1">
                  <h4 class="text-lg font-semibold text-white mb-2">{{ result.policyTitle }}</h4>
                  <div class="flex items-center space-x-3 mb-2">
                    <span :class="[
                      'px-3 py-1 rounded-full text-sm',
                      result.matchScore >= 90 ? 'bg-green-500/20 text-green-400' :
                      result.matchScore >= 70 ? 'bg-yellow-500/20 text-yellow-400' :
                      'bg-blue-500/20 text-blue-400'
                    ]">
                      {{ result.matchScore }}% 匹配度
                    </span>
                    <span class="text-blue-500 text-sm">{{ result.category }}</span>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-green-400 font-semibold">{{ result.potentialBenefit }}</div>
                  <div class="text-white/70 text-sm">预期收益</div>
                </div>
              </div>
              
              <p class="text-white/80 text-sm mb-3">{{ result.description }}</p>
              
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm mb-3">
                <div>
                  <span class="text-white/70">适用地区:</span>
                  <span class="text-blue-400 ml-1">{{ result.region }}</span>
                </div>
                <div>
                  <span class="text-white/70">申请难度:</span>
                  <span class="text-yellow-400 ml-1">{{ result.difficulty }}</span>
                </div>
                <div>
                  <span class="text-white/70">处理周期:</span>
                  <span class="text-green-400 ml-1">{{ result.timeline }}</span>
                </div>
                <div>
                  <span class="text-white/70">支持额度:</span>
                  <span class="text-purple-400 ml-1">{{ result.amount }}</span>
                </div>
              </div>

              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                  <span class="text-white/70 text-sm">匹配原因:</span>
                  <div class="flex flex-wrap gap-1">
                    <span
                      v-for="reason in result.matchReasons"
                      :key="reason"
                      class="px-2 py-1 bg-green-500/20 text-green-300 rounded text-xs"
                    >
                      {{ reason }}
                    </span>
                  </div>
                </div>
                <div class="flex space-x-2">
                  <button class="px-4 py-2 bg-white/10 text-white rounded hover:bg-white/20 transition-colors text-sm">
                    查看详情
                  </button>
                  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm">
                    申请指导
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="text-center py-12">
            <Target class="w-16 h-16 text-blue-500 mx-auto mb-4" />
            <p class="text-white/70 mb-2">请输入企业信息开始匹配</p>
            <p class="text-white/50 text-sm">AI将为您匹配最适合的跨境政策</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 贸易路线分析标签页 -->
    <div v-if="activeTab === 'routes'" class="space-y-6">
      <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
        <!-- 路线分析工具 -->
        <div class="glass-card p-6">
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <Ship class="w-5 h-5 mr-2 text-blue-500" />
            贸易路线分析
          </h3>
          
          <div class="space-y-4">
            <div>
              <label class="block text-white text-sm font-medium mb-2">起始国家/地区</label>
              <select v-model="routeAnalysis.origin" class="w-full p-2 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">请选择起始地</option>
                <option value="中国">中国</option>
                <option value="日本">日本</option>
                <option value="韩国">韩国</option>
                <option value="新加坡">新加坡</option>
              </select>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">目标国家/地区</label>
              <select v-model="routeAnalysis.destination" class="w-full p-2 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">请选择目的地</option>
                <option value="美国">美国</option>
                <option value="欧盟">欧盟</option>
                <option value="东盟">东盟</option>
                <option value="中东">中东</option>
              </select>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">货物类型</label>
              <select v-model="routeAnalysis.cargoType" class="w-full p-2 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">请选择货物类型</option>
                <option value="电子产品">电子产品</option>
                <option value="纺织品">纺织品</option>
                <option value="机械设备">机械设备</option>
                <option value="化工产品">化工产品</option>
                <option value="食品">食品</option>
              </select>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">运输方式</label>
              <select v-model="routeAnalysis.transport" class="w-full p-2 bg-gray-800 text-white rounded border border-gray-600">
                <option value="">请选择运输方式</option>
                <option value="海运">海运</option>
                <option value="空运">空运</option>
                <option value="陆运">陆运</option>
                <option value="多式联运">多式联运</option>
              </select>
            </div>

            <button
              @click="analyzeRoute"
              :disabled="!routeAnalysis.origin || !routeAnalysis.destination"
              class="w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50"
            >
              分析最优路线
            </button>
          </div>
        </div>

        <!-- 路线分析结果 -->
        <div class="glass-card p-6">
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <TrendingUp class="w-5 h-5 mr-2 text-green-400" />
            分析结果
          </h3>
          
          <div v-if="routeAnalysisResult" class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
              <div class="text-center p-4 bg-white/5 rounded-lg">
                <div class="text-2xl font-bold text-blue-500">{{ routeAnalysisResult.duration }}</div>
                <div class="text-white/70 text-sm">运输时间</div>
              </div>
              <div class="text-center p-4 bg-white/5 rounded-lg">
                <div class="text-2xl font-bold text-green-400">{{ routeAnalysisResult.cost }}</div>
                <div class="text-white/70 text-sm">运输成本</div>
              </div>
            </div>

            <div class="p-4 bg-white/5 rounded-lg">
              <h4 class="text-white font-medium mb-3">推荐路线方案</h4>
              <div class="space-y-3">
                <div 
                  v-for="route in routeAnalysisResult.routes" 
                  :key="route.id"
                  class="p-3 bg-white/5 rounded border border-blue-500/30"
                >
                  <div class="flex items-center justify-between mb-2">
                    <h5 class="text-white font-medium">{{ route.name }}</h5>
                    <span :class="[
                      'px-2 py-1 rounded text-xs',
                      route.priority === 'recommended' ? 'bg-green-500/20 text-green-400' :
                      route.priority === 'alternative' ? 'bg-yellow-500/20 text-yellow-400' :
                      'bg-blue-500/20 text-blue-400'
                    ]">
                      {{ route.priorityText }}
                    </span>
                  </div>
                  <p class="text-white/70 text-sm mb-2">{{ route.description }}</p>
                  <div class="grid grid-cols-3 gap-2 text-xs">
                    <div>
                      <span class="text-white/70">时间:</span>
                      <span class="text-blue-400 ml-1">{{ route.time }}</span>
                    </div>
                    <div>
                      <span class="text-white/70">成本:</span>
                      <span class="text-green-400 ml-1">{{ route.cost }}</span>
                    </div>
                    <div>
                      <span class="text-white/70">风险:</span>
                      <span class="text-yellow-400 ml-1">{{ route.risk }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="p-4 bg-white/5 rounded-lg">
              <h4 class="text-white font-medium mb-3">政策优惠信息</h4>
              <div class="space-y-2">
                <div 
                  v-for="policy in routeAnalysisResult.policies" 
                  :key="policy.id"
                  class="flex justify-between items-center text-sm"
                >
                  <span class="text-white/70">{{ policy.name }}</span>
                  <span class="text-green-400">{{ policy.benefit }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="text-center py-12">
            <Ship class="w-16 h-16 text-blue-500 mx-auto mb-4" />
            <p class="text-white/70 mb-2">选择路线参数开始分析</p>
            <p class="text-white/50 text-sm">获取最优贸易路线建议</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useTranslation } from '../composables/useTranslation.js'
import TradeCompanyMap from '../components/TradeCompanyMap.vue'
import WorldMapSVG from '../components/WorldMapSVG.vue'
import {
  Globe,
  Bot,
  MapPin,
  Target,
  Lightbulb,
  Activity,
  BarChart3,
  RefreshCw,
  TrendingUp,
  AlertTriangle,
  Ship,
  DollarSign,
  Building,
  FileText
} from 'lucide-vue-next'

export default {
  name: 'CrossBorderAnalysis',
  components: {
    TradeCompanyMap,
    WorldMapSVG,
    Globe,
    Bot,
    MapPin,
    Target,
    Lightbulb,
    Activity,
    BarChart3,
    RefreshCw,
    TrendingUp,
    AlertTriangle,
    Ship,
    DollarSign,
    Building,
    FileText
  },
  
  setup() {
    const { ts } = useTranslation()
    
    // 响应式数据
    const activeTab = ref('map')
    const mapView = ref('trade')
    const mapType = ref('world') // 'world' or 'china'
    const showTradeRoutes = ref(true)
    const selectedRegions = ref([])
    const selectedRegionInfo = ref(null)
    const activeTool = ref('route')
    
    // 国家对比功能
    const selectedCountries = ref([])
    const countryComparisonResult = ref(null)
    
    // AI洞察数据
    const aiInsights = ref([
      {
        id: 1,
        title: '美国对华关税政策升级',
        content: '美国对中国电动汽车关税从25%提高至100%，建议提前布局欧盟和东南亚替代市场',
        impact: '高影响 - 预计影响出口额30%',
        priority: 'high',
        priorityText: '高优先级',
        icon: 'AlertTriangle',
        regions: ['美国', '欧盟', '东南亚'],
        industries: ['汽车制造', '电池', '充电设备'],
        timeframe: '即时生效'
      },
      {
        id: 2,
        title: 'RCEP原产地累积规则新机遇',
        content: 'RCEP协议原产地累积规则为电子产品出口东南亚带来关税优惠，平均降税15-25%',
        impact: '高影响 - 预计节省关税成本20%',
        priority: 'high',
        priorityText: '高优先级',
        icon: 'TrendingUp',
        regions: ['东盟', '日本', '韩国'],
        industries: ['电子产品', '机械设备', '纺织品'],
        timeframe: '已生效'
      },
      {
        id: 3,
        title: '一带一路数字贸易走廊',
        content: '与巴基斯坦签署数字经济合作协议，开启中巴数字贸易新通道，预计带动相关出口增长35%',
        impact: '中高影响 - 新增市场机会',
        priority: 'medium',
        priorityText: '中优先级',
        icon: 'Ship',
        regions: ['巴基斯坦', '中亚', '西亚'],
        industries: ['数字服务', '电信设备', '软件'],
        timeframe: '2024年3月启动'
      },
      {
        id: 4,
        title: '欧盟CBAM碳边境调节机制',
        content: 'CBAM正式实施，涵盖钢铁、水泥、化肥等行业，中国出口企业需加强碳排放管理',
        impact: '中等影响 - 增加合规成本',
        priority: 'medium',
        priorityText: '中优先级',
        icon: 'AlertTriangle',
        regions: ['欧盟'],
        industries: ['钢铁', '水泥', '化肥', '铝业', '电力'],
        timeframe: '2024年1月开始'
      }
    ])
    
    // 地图控制器
    const mapControls = ref([
      { id: 'routes', label: '贸易路线', active: true },
      { id: 'policies', label: '政策热点', active: false },
      { id: 'companies', label: '企业分布', active: true },
      { id: 'ports', label: '港口信息', active: false }
    ])
    
    // 全球统计数据
    const globalStats = ref({
      countries: 195,
      tradeRoutes: 2847,
      companies: '125万+',
      policies: '156,847',
      tradingVolume: '32.6万亿美元',
      growthRate: '+8.5%',
      activePorts: 891,
      freeTradeAgreements: 354
    })
    
    // 智能推荐
    const smartRecommendations = ref([
      {
        id: 1,
        title: 'RCEP原产地证书优化建议',
        description: '基于您的产品结构，通过RCEP原产地累积规则可节省关税成本25%，建议调整供应链布局',
        action: '获取详细方案',
        confidence: 94,
        potentialSavings: '预计年节省200-350万元',
        implementationTime: '3-6个月',
        targetMarkets: ['东盟', '日本', '韩国']
      },
      {
        id: 2,
        title: '欧盟CE认证快速通道',
        description: '您的电子产品符合欧盟新法规要求，可申请CE认证快速通道，预计可缩短审批时间40%',
        action: '立即申请',
        confidence: 92,
        potentialSavings: '缩短上市时间2-3个月',
        implementationTime: '4-8周',
        targetMarkets: ['欧盟27国']
      },
      {
        id: 3,
        title: '一带一路数字贸易机遇',
        description: '中巴数字经济协议为您的软件服务提供新机遇，预计市场需求增长35%',
        action: '了解详情',
        confidence: 88,
        potentialSavings: '新增市场价值500万美元',
        implementationTime: '6-12个月',
        targetMarkets: ['巴基斯坦', '中亚5国']
      },
      {
        id: 4,
        title: '跨境电商试验区政策利用',
        description: '105个跨境电商试验区政策可为您的B2C业务提供"清单核放、汇总申报"便利',
        action: '申请入驻',
        confidence: 85,
        potentialSavings: '降低物流成本15-20%',
        implementationTime: '1-2个月',
        targetMarkets: ['全球消费市场']
      },
      {
        id: 5,
        title: '美国关税优化策略',
        description: '通过马来西亚、泰国等第三国进行部分生产转移，可规避25%关税，综合成本降低12%',
        action: '查看方案',
        confidence: 78,
        potentialSavings: '年节省关税300-500万元',
        implementationTime: '8-12个月',
        targetMarkets: ['美国市场']
      }
    ])
    
    // 实时动态
    const realTimeUpdates = ref([
      {
        id: 1,
        content: '美国对华电动汽车关税提高至100%，锂电池征收25%关税',
        time: '2分钟前',
        type: 'policy',
        priority: 'high',
        regions: ['美国', '中国'],
        industries: ['汽车制造', '电池', '新能源']
      },
      {
        id: 2,
        content: 'RCEP原产地累积规则新增电子化便利措施，通关效率提升30%',
        time: '18分钟前',
        type: 'policy',
        priority: 'medium',
        regions: ['RCEP成员国'],
        industries: ['电子产品', '机械设备', '纺织品']
      },
      {
        id: 3,
        content: '中欧贸易额本月同比增长8.5%，达到5247亿美元',
        time: '45分钟前',
        type: 'trade',
        priority: 'low',
        regions: ['中国', '欧盟'],
        industries: ['全行业']
      },
      {
        id: 4,
        content: '中巴数字经济合作协议正式生效，涵盖电信、软件、数字服务',
        time: '1小时前',
        type: 'policy',
        priority: 'medium',
        regions: ['中国', '巴基斯坦'],
        industries: ['数字服务', '电信设备', '软件']
      },
      {
        id: 5,
        content: '欧盟CBAM碳边境调节机制扩展至化学品行业',
        time: '2小时前',
        type: 'policy',
        priority: 'medium',
        regions: ['欧盟'],
        industries: ['化学品', '塑料', '钢铁', '水泥']
      },
      {
        id: 6,
        content: '105个跨境电商试验区新增B2B监管便利措施',
        time: '3小时前',
        type: 'policy',
        priority: 'low',
        regions: ['中国'],
        industries: ['电商', '消费品', '物流']
      },
      {
        id: 7,
        content: '苏伊士运河推出绿色通行激励，清洁能源船舶享10%优惠',
        time: '4小时前',
        type: 'logistics',
        priority: 'low',
        regions: ['全球'],
        industries: ['航运', '物流', '清洁能源']
      },
      {
        id: 8,
        content: '一带一路沿线新增3条数字贸易通道，覆盖中亚5国',
        time: '5小时前',
        type: 'trade',
        priority: 'medium',
        regions: ['中亚', '中国'],
        industries: ['数字贸易', '基础设施']
      }
    ])
    
    // 分析工具
    const analysisTools = ref([
      { id: 'route', name: '路线分析' },
      { id: 'compare', name: '政策对比' },
      { id: 'market', name: '市场分析' },
      { id: 'risk', name: '风险评估' }
    ])
    
    // 分析参数
    const routeAnalysis = reactive({
      origin: '',
      destination: '',
      cargoType: '',
      transport: ''
    })
    
    const policyCompare = reactive({
      region1: '',
      region2: ''
    })
    
    const marketAnalysis = reactive({
      industry: ''
    })
    
    // 分析结果
    const routeAnalysisResult = ref(null)
    const policyCompareResult = ref(null)
    const marketAnalysisResult = ref(null)
    
    // 政策匹配数据
    const enterpriseInfo = reactive({
      name: '',
      size: '',
      industry: '',
      targetMarket: ''
    })
    
    const matchResults = ref([])
    
    // 基础数据
    const countries = [
      { code: 'cn', name: '中国' },
      { code: 'us', name: '美国' },
      { code: 'de', name: '德国' },
      { code: 'jp', name: '日本' },
      { code: 'kr', name: '韩国' },
      { code: 'sg', name: '新加坡' }
    ]
    
    const regions = [
      { code: 'china', name: '中国' },
      { code: 'usa', name: '美国' },
      { code: 'eu', name: '欧盟' },
      { code: 'asean', name: '东盟' },
      { code: 'japan', name: '日本' }
    ]
    
    // 方法
    const triggerAIAnalysis = () => {
      console.log('触发AI分析')
      // 这里可以调用AI分析API
    }
    
    const refreshMap = () => {
      console.log('刷新地图数据')
    }
    
    const toggleMapLayer = (layerId) => {
      const control = mapControls.value.find(c => c.id === layerId)
      if (control) {
        control.active = !control.active
      }
    }
    
    const onRegionClick = (region) => {
      // 处理国家对比选择逻辑
      const countryCode = region.code || region.name
      const countryName = region.name || '未知区域'
      
      // 检查是否已选择此国家
      const existingIndex = selectedCountries.value.findIndex(c => c.code === countryCode)
      
      if (existingIndex !== -1) {
        // 如果已选择，则取消选择
        selectedCountries.value.splice(existingIndex, 1)
        countryComparisonResult.value = null
      } else {
        // 如果未选择，则添加（最多选择2个）
        if (selectedCountries.value.length < 2) {
          selectedCountries.value.push({
            code: countryCode,
            name: countryName
          })
        } else {
          // 如果已选择2个，替换第一个
          selectedCountries.value[0] = selectedCountries.value[1]
          selectedCountries.value[1] = {
            code: countryCode,
            name: countryName
          }
        }
      }
      
      // 如果选择了两个国家，自动生成对比
      if (selectedCountries.value.length === 2) {
        generateCountryComparison()
      } else {
        countryComparisonResult.value = null
      }
      
      // 保持原有的区域详情功能
      selectedRegionInfo.value = {
        name: region.name || '未知区域',
        companies: '12.5万家',
        tradeVolume: '2,847亿美元',
        policies: '127条',
        riskLevel: 'low',
        riskLevelText: '低风险',
        keyPolicies: [
          {
            id: 1,
            title: '外商投资负面清单',
            summary: '进一步缩减外商投资准入限制'
          },
          {
            id: 2,
            title: '跨境电商政策',
            summary: '简化跨境电商进出口流程'
          }
        ]
      }
    }
    
    const onRouteClick = (route) => {
      console.log('点击贸易路线:', route)
    }
    
    // 生成国家对比分析
    const generateCountryComparison = () => {
      const country1 = selectedCountries.value[0]
      const country2 = selectedCountries.value[1]
      
      // 模拟对比数据生成
      countryComparisonResult.value = {
        country1: {
          name: country1.name,
          economy: {
            gdp: getRandomGDP(),
            tradeVolume: getRandomTradeVolume(),
            growth: getRandomGrowth()
          },
          policies: {
            tariffRate: getRandomTariff(),
            freeTradeAgreements: getRandomFTA(),
            businessEase: getRandomBusinessEase()
          },
          infrastructure: {
            portsRanking: getRandomPortRanking(),
            logisticsCost: getRandomLogisticsCost(),
            digitalIndex: getRandomDigitalIndex()
          }
        },
        country2: {
          name: country2.name,
          economy: {
            gdp: getRandomGDP(),
            tradeVolume: getRandomTradeVolume(),
            growth: getRandomGrowth()
          },
          policies: {
            tariffRate: getRandomTariff(),
            freeTradeAgreements: getRandomFTA(),
            businessEase: getRandomBusinessEase()
          },
          infrastructure: {
            portsRanking: getRandomPortRanking(),
            logisticsCost: getRandomLogisticsCost(),
            digitalIndex: getRandomDigitalIndex()
          }
        },
        comparison: {
          tradeAdvantage: country1.name,
          policyFriendliness: Math.random() > 0.5 ? country1.name : country2.name,
          infrastructureAdvantage: Math.random() > 0.5 ? country1.name : country2.name,
          overallRecommendation: Math.random() > 0.5 ? country1.name : country2.name,
          keyDifferences: [
            `${country1.name}关税率更低，贸易便利性更高`,
            `${country2.name}基础设施排名更靠前`,
            `两国都是重要的贸易伙伴，各有优势`,
            `建议采用差异化市场策略`
          ],
          opportunities: [
            {
              title: 'RCEP协议优势',
              description: `利用RCEP协议在${country1.name}和${country2.name}之间的关税优惠`,
              potential: '年节省成本15-25%'
            },
            {
              title: '数字贸易合作',
              description: '两国在数字经济领域的合作机遇',
              potential: '市场增长潜力35%'
            },
            {
              title: '供应链优化',
              description: '通过双边布局优化供应链风险管理',
              potential: '降低运营风险30%'
            }
          ]
        }
      }
    }
    
    // 随机数据生成函数
    const getRandomGDP = () => (Math.random() * 20 + 5).toFixed(1) + '万亿美元'
    const getRandomTradeVolume = () => (Math.random() * 5000 + 1000).toFixed(0) + '亿美元'
    const getRandomGrowth = () => (Math.random() * 8 + 2).toFixed(1) + '%'
    const getRandomTariff = () => (Math.random() * 15 + 5).toFixed(1) + '%'
    const getRandomFTA = () => Math.floor(Math.random() * 30 + 10) + '项'
    const getRandomBusinessEase = () => Math.floor(Math.random() * 50 + 20) + '位'
    const getRandomPortRanking = () => Math.floor(Math.random() * 100 + 1) + '位'
    const getRandomLogisticsCost = () => (Math.random() * 2000 + 500).toFixed(0) + '美元/集装箱'
    const getRandomDigitalIndex = () => (Math.random() * 40 + 60).toFixed(1) + '分'
    
    const performMatch = () => {
      if (!enterpriseInfo.name || !enterpriseInfo.industry) return
      
      // 模拟AI匹配结果
      matchResults.value = [
        {
          id: 1,
          policyTitle: 'RCEP原产地累积规则优惠',
          category: '关税优惠',
          matchScore: 95,
          potentialBenefit: '节省关税25%',
          description: '符合RCEP原产地累积规则，可享受东盟、日韩等15国的关税优惠待遇',
          region: '东盟+日韩',
          difficulty: '中等',
          timeline: '2-3个月',
          amount: '最高500万',
          matchReasons: ['行业匹配', '规模适配', '市场对口']
        },
        {
          id: 2,
          policyTitle: '跨境电商综合试验区政策',
          category: '贸易便利',
          matchScore: 88,
          potentialBenefit: '通关效率提升60%',
          description: '在综试区内享受简化流程、税收优惠等政策红利',
          region: '全国105个试验区',
          difficulty: '较低',
          timeline: '1个月',
          amount: '无上限',
          matchReasons: ['业务模式', '地理位置', '发展阶段']
        },
        {
          id: 3,
          policyTitle: '高新技术企业出口退税',
          category: '税收优惠',
          matchScore: 82,
          potentialBenefit: '退税率15-17%',
          description: '高新技术产品出口可享受更高的退税率，加快资金回流',
          region: '全国',
          difficulty: '较高',
          timeline: '3-6个月',
          amount: '按出口额计算',
          matchReasons: ['技术含量', '产品类别', '资质条件']
        },
        {
          id: 4,
          policyTitle: '一带一路沿线投资便利化',
          category: '投资促进',
          matchScore: 75,
          potentialBenefit: '投资成本降低30%',
          description: '在一带一路沿线国家投资享受双边协定优惠和便利化措施',
          region: '一带一路沿线',
          difficulty: '中等',
          timeline: '6-12个月',
          amount: '项目总投资20%',
          matchReasons: ['投资方向', '合作模式', '战略契合']
        }
      ]
    }
    
    const analyzeRoute = () => {
      routeAnalysisResult.value = {
        duration: '12-15天',
        cost: '$2,400/集装箱',
        risk: 'low',
        riskText: '低风险',
        routes: [
          {
            id: 1,
            name: '太平洋直航线',
            priority: 'recommended',
            priorityText: '推荐',
            description: '经太平洋直达，时间最短，成本合理',
            time: '12天',
            cost: '$2,400',
            risk: '低'
          },
          {
            id: 2,
            name: '亚欧大陆桥',
            priority: 'alternative',
            priorityText: '备选',
            description: '经陆路运输，成本较低，时间稍长',
            time: '18天',
            cost: '$1,800',
            risk: '中'
          },
          {
            id: 3,
            name: '南向通道',
            priority: 'backup',
            priorityText: '备选',
            description: '经东南亚中转，可节省部分费用',
            time: '16天',
            cost: '$2,100',
            risk: '中'
          }
        ],
        policies: [
          {
            id: 1,
            name: 'RCEP关税优惠',
            benefit: '降税15%'
          },
          {
            id: 2,
            name: '自贸区便利化',
            benefit: '通关提速50%'
          },
          {
            id: 3,
            name: '物流补贴',
            benefit: '运费补贴10%'
          }
        ]
      }
    }
    
    const comparePolicies = () => {
      policyCompareResult.value = {
        taxDiff: '5.2%',
        threshold: '中等',
        incentive: '较高'
      }
    }
    
    const analyzeMarket = () => {
      marketAnalysisResult.value = [
        {
          id: 1,
          market: '东南亚市场',
          opportunity: 'RCEP协议带来关税优惠',
          score: 8.5
        },
        {
          id: 2,
          market: '欧盟市场',
          opportunity: '绿色产品需求增长',
          score: 7.8
        },
        {
          id: 3,
          market: '中东市场',
          opportunity: '基础设施建设需求',
          score: 7.2
        }
      ]
    }
    
    return {
      ts,
      activeTab,
      mapView,
      mapType,
      showTradeRoutes,
      selectedRegions,
      selectedRegionInfo,
      activeTool,
      aiInsights,
      mapControls,
      globalStats,
      smartRecommendations,
      realTimeUpdates,
      analysisTools,
      enterpriseInfo,
      matchResults,
      routeAnalysis,
      policyCompare,
      marketAnalysis,
      routeAnalysisResult,
      policyCompareResult,
      marketAnalysisResult,
      countries,
      regions,
      selectedCountries,
      countryComparisonResult,
      triggerAIAnalysis,
      refreshMap,
      toggleMapLayer,
      onRegionClick,
      onRouteClick,
      performMatch,
      analyzeRoute,
      comparePolicies,
      analyzeMarket,
      generateCountryComparison
    }
  }
}
</script>

<style scoped>
.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  }
  to {
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
  }
}

.cyber-glow {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
}
</style> 